<template>
	<view class="notice-item flex--col" :class="{'checked':checked}" @click="openDetail" role="button">
		<view class="flex--col">
			<view class="notice-item-heading flex--row">
				<text class="text--secondary-dark">{{noticeInfo.noticeName}}</text>
				<text class="text--sub-dark">{{noticeInfo.noticeTime}}</text>
			</view>
			<view class="notice-item-content">
				<text class="text--thirdary-dark">{{noticeTypeInfo.message}}</text>
			</view>
		</view>
		<view class="notice-item-content flex--row" v-show="!noticeInfo.isRead">
			<image aria-label="消息尚未确认" src="@/static/ongoing/uncheck.svg" class="icon--small"></image>
			<text class="text--sub-dark" >消息尚未确认</text>
		</view>
		<view class="notice-item-content flex--row" v-show="noticeInfo.isRead">
			<image aria-label="消息已确认" src="@/static/ongoing/checked.svg" class="icon--small"></image>
			<text class="text--sub-dark">消息已确认</text>
		</view>
		<NoticeDetail @confirmNotice="confirmNotice" ref="noticeDetail" :noticeInfo="noticeInfo" :noticeTypeInfo="noticeTypeInfo"></NoticeDetail>
	</view>
</template>

<script>
	import * as NoticeApi from "@/api/notice/notice.js"
	import {dateFormat,timeFormat} from "@/utils/util.js"
	import NoticeDetail from "./NoticeDetail.vue"
	export default{
		props:['checked','notice'],
		components:{
			NoticeDetail
		},
		computed:{
			noticeInfo(){
				const noticeItem = {
					...this.notice
				}
				const travelDateStr = dateFormat("mm月dd日",new Date(this.notice.startTime))
				const travelTime = timeFormat(this.notice.startTime,this.notice.endTime)
				const noticeTime = dateFormat("HH:MM",new Date(this.notice.createTime))
				noticeItem.noticeName = `${travelDateStr}的${this.notice.routeName}`
				noticeItem.noticeTime = noticeTime
				noticeItem.startTime = travelTime.startTime
				noticeItem.endTime = travelTime.endTime
				noticeItem.date = travelTime.date
				
				if(this.notice.type === 3){
					const travelNewTime = timeFormat(this.notice.newStartTime,this.notice.newEndTime)
					noticeItem.newDate = travelNewTime.date
					noticeItem.newStartTime = travelNewTime.startTime
					noticeItem.newEndTime = travelNewTime.endTime
				}
				return noticeItem
			},
			noticeTypeInfo(){
					const data = {
						img:"",
						message:""
					}
					switch(this.noticeInfo.type){
						case 1:
							data.img = "../../static/notice/happy.svg"
							data.message="出行已成功预约。"
							break
						case 2:
							data.img = "../../static/notice/sad.svg"
							data.message="出行被志愿者拒绝了。"
							break
						case 3:
							data.img = "../../static/notice/binoculars.svg"
							data.message="出行时间被修改了。"
							break
						case 4:
							data.img = "../../static/notice/sad.svg"
							data.message="出行被取消了。"
							break
						case 5:
							data.img = "../../static/notice/binoculars.svg"
							data.message="其他消息"
							break
					}
					return data
				}
	},
	methods:{
		openDetail(){
			this.$refs.noticeDetail.open()
		},
		async confirmNotice(){
			const params = {
				noticeId:this.noticeInfo.id
			}
			await NoticeApi.confirmNotice(params)
			this.$emit("confirmNotice",this.noticeInfo.id)
		}
	}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 700;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 18px;
		color:#666;
	}
	
	.text--sub-dark{
		font-size: 16px;
		font-weight: 100;
		color:#666;
	}
	
	.notice-item{
		padding:8px;
		gap:12px;
		@include border-four-roundings;
		.notice-item-heading{
			justify-content: space-between;
		}
		
		.notice-item-content{
			margin-top: 4px;
			align-items: center;
		}
		
		&.checked{
			filter:grayscale(1);
		}
	}
</style>